﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>要素动画</title>
    <script src="./static/libs/include-mapboxgl-local.js"></script>
    <!--引入当前页面样式表-->
    <link href="../../css/mapboxgl/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        //使用严格模式
        "use strict";
        //定义地图
        var map;
        //点半径大小
        var radius = 20;
        //点半径是否处于增大状态
        var isIncreaseState = true;
        /**初始化地图显示
        */
        function init() {
            //构造地图容器
            map = new mapboxgl.Map({
                //地图容器div的ID
                container: 'map',
                //设置样式
                style: {
                    "version": 8,
                    "sources": {
                        "osm-tiles": {
                            "type": "raster",
                            'tiles': ["http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"],
                            'tileSize': 256
                        }
                    },
                    "layers": [{
                        "id": "simple-tiles",
                        "type": "raster",
                        "source": "osm-tiles",
                        "minzoom": 0,
                        "maxzoom": 16
                    }]
                },
                //显示中心
                center: [120, 40],
                //最小显示等级
                minZoom: 0,
                //最大显示等级
                maxZoom: 16,
                //当前显示等级
                zoom: 2,
                //水平旋转角度
                bearingnumber: 0,
                //垂直倾斜角度
                pitch: 0,
                //支持倾斜交互操作
                pitchWithRotate: true,
                //支持旋转交互操作
                dragRotate: true
            });
            //添加导航控件，设置显示位置。位置包括：'top-left'，'top-right'，'bottom-left'，'bottom-right'
            map.addControl(new mapboxgl.NavigationControl(), 'top-left');

            /**地图加载完成事件
            *  @param {string}   type 事件类型（地图加载完成）
            *  @param {function} listener 事件触发后的响应函数
            */
            map.on('load', function () {
                //添加点
                addPoint();
            });
        }

        /**添加点至地图中显示
        */
        function addPoint() {
            //用geojson创建一个点
            var geometryPoint = {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [110, 35]
                }
            };
            //将点添加到一个图层中，在地图中显示
            map.addLayer({
                //此id可随意设置，但是要唯一
                "id": "Points",
                //指定类型为点
                "type": "circle",
                //设置数据来源
                "source": {
                    "type": "geojson",
                    "data": geometryPoint
                },
                //设置绘制参数
                "paint": {
                    //设置点的半径，像素单位
                    "circle-radius": 20,
                    //设置点的填充颜色
                    "circle-color": 'white',
                    //设置边线宽度，像素单位
                    "circle-stroke-width": 3,
                    //设置边线颜色
                    "circle-stroke-color": '#ffcc33'
                }
            });
            //设置计时器，不停改变点的半径大小
            setInterval(function () {
                //半径增大状态
                if (isIncreaseState) {
                    //增大半径
                    radius++;
                    //重新设置点的半径
                    map.setPaintProperty('Points', 'circle-radius', radius);
                    //半径超过50就开始减小
                    if (radius > 50) {
                        //设置半径减小状态
                        isIncreaseState = false;
                    }
                }
                //半径减小状态
                else {
                    //减小半径
                    radius--;
                    //重新设置点的半径
                    map.setPaintProperty('Points', 'circle-radius', radius);
                    //半径减小到20开始增大
                    if (radius <= 20) {
                        //设置半径增大状态
                        isIncreaseState = true;
                    }
                }
            }, 200);
        }
    </script>
</head>
<body onload="init()">
    <div id="map" style="width: 100%; height: 100%;">
    </div>
</body>
</html>
